<template>
  <div class="content">
    <div class="filter-wrap">
      <div class="box-flex">
        <div class="flex">
          <zx-form-group :title="$t('CURRENCY')">
            <zx-select :place="$t('CURRENCY_PLACE')" v-model="coinType" class="boxShadow" @change="changeValue">
              <zx-option :value="item.coin_no" v-for='(item,key) of allCoinTypeList' :key='key'>{{item.coin_core}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
        <div class="flex">
          <zx-form-group :title="$t('TYPE')">
            <zx-select :place="$t('TYPE_PALCE')" v-model="entrustType" class="boxShadow">
              <zx-option value="">{{'ALL'|t}}</zx-option>
              <zx-option value="buy">{{'BUY'|t}}</zx-option>
              <zx-option value="sell">{{'SELLS'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
      </div>
    </div>
    <ul class="manage-list">
      <li class="manage-item boxShadow" v-for="(item,key) of dataList" :key='key'>
        <div class="item-top border-b">
          <div class="top-left">
            <span class="btn red" :class="item.entrustType=='0'?'red':'success'">{{item.entrustType=='0'?$t('BUY'):$t('SELL')}}</span>
            <span class="item-text" v-if="item.state==0">{{'COMMISSIONED'|t}}</span>
            <span class="item-text" v-else-if="item.state==1">{{'CLINCH'|t}}</span>
            <span class="item-text" v-else>{{'UNDO'|t}}</span>
          </div>
          <div class="item-right">{{item.dateFormatDate}}</div>
        </div>
        <div class="item-desc">
          <p class="item-desc-text">
            <span>{{'ENTRUST_PRICE'|t}}：</span>
            <span class="c-primary">{{item.entrustPrice|Fixed}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'ENTRUST_NUMBER'|t}}：</span>
            <span>{{item.entrustNum}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'QUANTITY_SOLD'|t}}：</span>
            <span>{{item.dealNum}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'TOTAL_ENTRUSTMENT'|t}}：</span>
            <span>{{item.entrustPrice*item.entrustNum|Fixed}}</span>
          </p>
        </div>
        <div class="item-button">
          <zx-button class="c-primary" v-if="item.state==0">{{'REVOKE'|t}}</zx-button>
        </div>
      </li>
    </ul>
    <div v-infinite-scroll="getDataList" infinite-scroll-disabled="loading" infinite-scroll-distance="10"></div>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';
  export default {
    data() {
      return {
        entrustType: '',
        dataList: [],
        queryType: '',
        coinType: '',
        allCoinTypeList: [],
        loading: false,
        showNoDataBool: false,
        pageSize: 1,
        queryState: ''
      };
    },
    methods: {
      //  获取所有币种
      async GetAllCoinType() {
        try {
          let res = await Coins.GetAllCoinType({
            token: Auth.getItem('token')
          });
          this.coinType = res.data[0].coin_no;
          this.allCoinTypeList = res.data;
        } catch (error) {
          console.log(error);
        }
      },
      changeValue(value) {
        if (!value) { return false; };
        this.getDataList();
      },
      async getDataList(coinTypeValue) {
        if (!this.coinType) {
          return false;
        }
        if (this.loading) { return false; };
        this.loading = true;
        try {
          let res = await Coins.GetCoinEntrustByUserNoOnTransaction({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            entrustType: this.entrustType,
            entrustNo: this.coinType,
            convertNo: '',
            type: this.queryType,
            state: this.queryState,
            pageSize: this.pageSize,
            lineSize: 10
          });
          console.log(res);
          this.dataList = [...this.dataList, ...res.data.coinEntrustDtos];
          if (res.data.coinEntrustDtos.length >= 10) {
            this.loading = false;
          }
          this.pageSize++;
          this.showNoDataBool = res.data.coinEntrustSize == 0 ? true : false;
        } catch (error) {
          console.log(error);
        }
      },
      async getData() {
        this.GetAllCoinType();
      }
    },
    watch: {
      entrustType(val) {
        this.dataList = [];
        this.loading = false;
        this.pageSize = 1;
        this.getDataList();
      },
      coinType(val) {
        this.dataList = [];
        this.loading = false;
        this.pageSize = 1;
        this.getDataList();
      }
    },
    created() {
      this.queryType = this.$route.query.type;
      this.queryState = this.$route.query.state;
      this.getData();
      // GetCoinEntrustByUserNoOnTransaction
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/manage.scss";
</style>